<template>
	<view>
		<view class="container">
			<image class="m-backdrop" src="../../static/icon/icon_back5.png" mode="widthFix"></image>
			<view class="m-header">
				<image class="m-backdrop" src="../../static/icon/icon_back5.png" mode="widthFix"></image>
				<view class="g-custom-nav flex-box pl30" :style="{ paddingTop: statusBarHeight + 'px', height: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
					<image @click="navBack" class="icon-back mr15" src="../../static/icon/arrow_back.png" mode="aspectFit"></image>
					<view class="nav-title flex-1">{{ fourm_name }}</view>
				</view>
			</view>
			<view class="pr" :style="{paddingTop: 'calc(140rpx + ' + statusBarHeight + 'px)'}">
				<view class="flex-box tc col-f mb40">
					<view class="flex-1">
						<view class="fs32 fwb mb25">{{ forum_user_count }}</view>
						<view class="fs24">参与</view>
					</view>
					<view class="line"></view>
					<view class="flex-1">
						<view class="fs32 fwb mb25">{{ forum_count }}</view>
						<view class="fs24">动态</view>
					</view>
					<view class="line"></view>
					<view class="flex-1">
						<view class="fs32 fwb mb25">{{ thumbs_up_count }}</view>
						<view class="fs24">点赞</view>
					</view>
				</view>
				<view class="scroll-tab">
					<view class="scroll-item" @click="topicTypeClick(0)" :class="{ active: topicIdx == 0 }">最新</view>
					<view class="scroll-item" @click="topicTypeClick(1)" :class="{ active: topicIdx == 1 }">热门</view>
				</view>
				<!--  -->
				<view class="post-box pb30">
					<block v-if="topicIdx == 0">
						<view class="post-item ptb40 plr30" v-for="(item, index) in forumList" :key="item.id">
							<view class="flex-box mb40 flex-align-start">
								<image class="img-head mr20 mt5" :src="item.user == null ? '' : item.user.avatar" mode="aspectFill"></image>
								<view class="flex-1">
									<view class="mb15 fs30 col-3 fwb">{{ item.user == null ? '' : item.user.nickname }}</view>
									<view class="fs24 col-9">{{ $formatDatetime(item.updatetime, 'yyyy-mm-dd hh:ii:ss') }}</view>
								</view>
								<view class="btn1" v-if="item.is_focus_count == 0" @click="toggleFocusUser(item.user_id)">关注</view>
								<view class="btn2" v-else @click="toggleFocusUser(item.user_id)">已关注</view>
							</view>
							<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id" hover-class="none">
								<view class="text mb20">{{ item.content }}</view>
								<block v-if="item.images.length > 0 && item.images[0].length > 0">
									<view class="img-box flex flex-align-start flex-wrap">
										<image
											v-for="img in item.images"
											:src="img"
											:class="{ img1: item.images.length == 1, img2: item.images.length == 2, img3: item.images.length >= 3 }"
											mode="aspectFill"
										></image>
									</view>
								</block>
							</navigator>
							<view class="topic mt20 mb30">{{ item.topic.name }}</view>
							<view class="flex-box flex-end">
								<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id" hover-class="none" class="m-button flex-box flex-center">
									<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit"></image>
									<view class="fs26 col-3">分享</view>
								</navigator>
								<button class="m-button flex-box flex-center">
									<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit"></image>
									<view class="fs26 col-3">{{ item.comment_count }}</view>
								</button>
								<button class="m-button flex-box flex-center" @click="toggleFav(item.id, index)">
									<image v-if="item.is_fav_count == 0" class="icon mr10" src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
									<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png" mode="aspectFit"></image>
									<view class="fs26 col-3">{{ item.fav_count }}</view>
								</button>
							</view>
						</view>
					</block>
					<!-- 热门 -->
					<block v-if="topicIdx == 1">
						<block v-for="(item, index) in forumList">
							<view class="post-item ptb40 plr30" :key="item.id" v-if="item.hot_status == 1">
								<view class="flex-box mb40 flex-align-start">
									<image class="img-head mr20 mt5" :src="item.user == null ? '' : item.user.avatar" mode="aspectFill"></image>
									<view class="flex-1">
										<view class="mb15 fs30 col-3 fwb">{{ item.user == null ? '' : item.user.nickname }}</view>
										<view class="fs24 col-9">{{ $formatDatetime(item.updatetime, 'yyyy-mm-dd hh:ii:ss') }}</view>
									</view>
									<view class="btn1" v-if="item.is_focus_count == 0" @click="toggleFocusUser(item.user_id)">关注</view>
									<view class="btn2" v-else @click="toggleFocusUser(item.user_id)">已关注</view>
								</view>
								<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id" hover-class="none">
									<view class="text mb20">{{ item.content }}</view>
									<block v-if="item.images.length > 0 && item.images[0].length > 0">
										<view class="img-box flex flex-align-start flex-wrap">
											<image
												v-for="img in item.images"
												:src="img"
												:class="{ img1: item.images.length == 1, img2: item.images.length == 2, img3: item.images.length >= 3 }"
												mode="aspectFill"
											></image>
										</view>
									</block>
								</navigator>
								<view class="topic mt20 mb30">{{ item.topic.name }}</view>
								<view class="flex-box flex-end">
									<navigator :url="'/pages/discover_detail/discover_detail?id=' + item.id" hover-class="none" class="m-button flex-box flex-center">
										<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit"></image>
										<view class="fs26 col-3">分享</view>
									</navigator>
									<button class="m-button flex-box flex-center">
										<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit"></image>
										<view class="fs26 col-3">{{ item.comment_count }}</view>
									</button>
									<button class="m-button flex-box flex-center" @click="toggleFav(item.id, index)">
										<image v-if="item.is_fav_count == 0" class="icon mr10" src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
										<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png" mode="aspectFit"></image>
										<view class="fs26 col-3">{{ item.fav_count }}</view>
									</button>
								</view>
							</view>
						</block>
					</block>
					<view class="g-btn3-wrap mt15">
						<view class="g-btn3"  :class="{nomore: forumMore.nomore == true || forumMore.loading == true}" @click="getForumList(topic_id)">{{ forumMore.text }}</view>
					</view>
					<!-- 	<view class="post-item ptb40 plr30" v-for="item in 3">
						<view class="flex-box mb40 flex-align-start">
							<image class="img-head mr20 mt5" src="/static/icon/img_service.png" mode="aspectFill"></image>
							<view class="flex-1">
								<view class="mb15 fs30 col-3 fwb">可爱的后辈</view>
								<view class="fs24 col-9">1小时前</view>
							</view>
							<view class="btn1">关注</view>
							<view class="btn2">已关注</view>
						</view>
						<view class="text mb20">今天求职怎么样怎么样了今天求职怎么样怎么样了 求职怎么样怎么样了今天求...</view>
						<view class="img-box flex flex-align-start flex-wrap">
							<image class="img1" src="/static/icon/img_service.png" mode="aspectFill"></image>
							<image class="img2" src="/static/icon/img_service.png" mode="aspectFill"></image>
							<image class="img2" src="/static/icon/img_service.png" mode="aspectFill"></image>
							<image class="img3" src="/static/icon/img_service.png" mode="aspectFill"></image>
							<image class="img3" src="/static/icon/img_service.png" mode="aspectFill"></image>
							<image class="img3" src="/static/icon/img_service.png" mode="aspectFill"></image>
						</view>
						<view class="topic mt20 mb30">第三届九大系统</view>
						<view class="flex-box flex-end">
							<button class="m-button flex-box flex-center">
								<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit"></image>
								<view class="fs26 col-3">分享</view>
							</button>
							<button class="m-button flex-box flex-center">
								<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit"></image>
								<view class="fs26 col-3">1.3k</view>
							</button>
							<button class="m-button flex-box flex-center">
								<image class="icon mr10" src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
								<image class="icon mr10" src="/static/icon/icon_thumbs_selected.png" mode="aspectFit"></image>
								<view class="fs26 col-3">212</view>
							</button>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<navigator class="icon-gotop" url="/pages/release/release" hover-class="none"><image src="/static/icon/icon_btn_add.png" mode="aspectFit"></image></navigator>
	</view>
</template>

<script>
const core = require('../../xiluedu/core.js');
const util = require('../../xiluedu/util.js');
export default {
	data() {
		return {
			statusBarHeight: 20,
			topicIdx: 0, // tab idx
			topic_id: 0, // 话题id
			fourm_name: '', // 话题名
			forum_user_count: 0, // 参与数
			forum_count: 0, // 动态数
			thumbs_up_count: 0, // 点赞数
			forumList: [], // 最新帖子
			forumMore: { page: 1 }
		};
	},
	onLoad(e) {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		this.topic_id = e.topic_id;
		this.getForumList(e.topic_id);
		this.getTopicData(e.topic_id);
		uni.$on('topicDetailRefresh',(data)=>{
			this.refreshForum();
		})
	},
	onPullDownRefresh() {
		this.refreshForum()
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	methods: {
		getForumList(id) {
			util.fetch(this, 'xiluedu.forum/lists', { pagesize: 10, topic_id: id }, 'forumMore', 'forumList', 'data', data => {
				data.data.map(item => {
					item.images = item.images.split(',');
				});
			});
		},
		getTopicData(id) {
			core.get({
				url: 'xiluedu.topic/invitation',
				data: { topic_id: id },
				success: ret => {
					if (ret.code == 1) {
						this.fourm_name = ret.data.name;
						this.forum_user_count = ret.data.forumuser_count;
						this.forum_count = ret.data.forum_count;
						this.thumbs_up_count = ret.data.thumbs_up_count;
					}
				}
			});
		},
		topicTypeClick(idx) {
			this.topicIdx = idx;
		},
		navBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 点赞
		toggleFav(forum_id, index) {
			this.$core.post({
				url: 'xiluedu.forum/toggle_fav',
				data: { forum_id: forum_id },
				success: ret => {
					if (ret.data.is_fav_count == 0) {
						this.forumList[index].fav_count = this.forumList[index].fav_count - 1;
					} else {
						this.forumList[index].fav_count = this.forumList[index].fav_count + 1;
					}
					this.forumList[index].is_fav_count = ret.data.is_fav_count;
					uni.$emit('discoverRefresh');
				},
				fail: err => {}
			});
		},
		// 关注取关
		toggleFocusUser(user_id) {
			this.$core.post({
				url: 'xiluedu.forum/toggle_focus',
				data: { user_id: user_id },
				success: ret => {
					for (let i = 0; i < this.forumList.length; i++) {
						if (user_id == this.forumList[i].user_id) {
							this.forumList[i].is_focus_count = ret.data.is_focus_count;
						}
					}
					uni.$emit('discoverRefresh');
				},
				fail: err => {
					
					console.log(err);
				}
			});
		},
		refreshForum() {
			this.forumList = [];
			this.forumMore = { page: 1 };
			this.getForumList(this.topic_id);
		}
	}
};
</script>

<style scoped>
.container {
	overflow-y: unset;
}
.g-custom-nav {
	padding-right: 150rpx;
}
.g-custom-nav .nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
	line-height: 40rpx;
	text-align: center;
}
/*  */
.scroll-tab {
	padding: 0 30rpx;
	height: 100rpx;
	overflow-x: scroll;
	white-space: nowrap;
	background-color: #fff;
	border-bottom: 1rpx solid #efefef;
	z-index: 10;
}
.scroll-tab .scroll-item {
	display: inline-block;
	line-height: 100rpx;
	font-size: 32rpx;
	color: #333333;
}
.scroll-tab .scroll-item.active {
	font-weight: bold;
}
.scroll-tab .scroll-item + .scroll-item {
	margin-left: 55rpx;
}
/*  */

.post-box .post-item + .post-item {
	border-top: 20rpx solid #f7f7f7;
}
.post-box .img-head {
	display: block;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.post-box .btn1 {
	width: 80rpx;
	height: 36rpx;
	border: 1rpx solid #ececec;
	border-radius: 4rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	line-height: 32rpx;
	text-align: center;
}
.post-box .btn2 {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
}
.post-box .text {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 46rpx;
}
.post-box image {
	display: block;
}
.post-box .img1 {
	margin: 0 0 20rpx;
	width: 418rpx;
	height: 428rpx;
}
.post-box .img2 {
	margin: 0 12rpx 12rpx 0;
	width: 304rpx;
	height: 278rpx;
}
.post-box .img2:nth-of-type(2n) {
	margin: 0 0 12rpx;
}
.post-box .img3 {
	margin: 0 12rpx 12rpx 0;
	width: 200rpx;
	height: 200rpx;
}
.post-box .img3:nth-of-type(3n) {
	margin: 0 0 12rpx;
}
.post-box .topic {
	font-size: 26rpx;
	font-weight: 500;
	color: #5964b8;
}
/* .post-box .topic::before {
	content: '#';
}
.post-box .topic::after {
	content: '#';
} */
.post-box .icon {
	display: block;
	width: 28rpx;
	height: 28rpx;
}
.post-box .m-button {
	margin-left: 60rpx;
	line-height: 30rpx;
}
/*  */
.icon-gotop {
	position: fixed;
	right: 30rpx;
	bottom: 110rpx;
	z-index: 5;
	display: block;
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
}
.icon-gotop image {
	display: block;
	width: 96rpx;
	height: 96rpx;
}
.line{
	width: 2rpx;
	height: 64rpx;
	background: #FFFFFF;
	opacity: 0.2;
}
</style>
